<template>
    <section class="loginContainer">
            <div>
                <div class="hedx">
                    <span @click="fun()" class="iconfont icon-jiantou_xiangzuo_o"></span>
                    <span @click="fun1()">注册</span>
                </div>
                <div class="zxw">
                    <h2 class="hw2">手机快捷登录</h2>
                    <span class="z_h">未注册过的手机号将自动创建账号</span>
                </div>
                <!--  -->
                <form @submit.prevent="login">
                <div class="mid">
                    <p><input type="text" class="oi" placeholder="请输入手机号" v-model="phone">
                        <a :disabled="!rightPhone" class="ol err_phone" :class="{right_phone: rightPhone}" @click.prevent="getCode">
                            {{computerTime>0 ? `已发送(${computerTime}s)` : '获取验证码'}}
                        </a>
                    </p>
                    <p><input type="text" class="oi" placeholder="请输入验证码" v-model="code"></p>
                    <p class="l_p"><input type="checkbox" class="tui-checkbox"><b>我已阅读并同意：《<span>贝壳隐私政策</span>》及《<span>贝壳用户服务协议</span>》</b></p>
                </div>
                <div class="b_ut" :class="{but: loginWay}" @click="loginWay = true">
                    <button class="login_submit">立即登录</button>
                </div>

                <!--      &lt;!&ndash;  &ndash;&gt;-->
                <!--      <div class="b_ut" :class="{but: !loginWay}" @click="loginWay = false">-->
                <!--        <a>账号密码登录</a>-->
                <!--      </div>-->
                <!--      &lt;!&ndash; 尾部 &ndash;&gt;-->
                <div class="ft">
                    <span>其他方式登录</span>
                    <div class="im">
                        <img src="img/zzz.jpg">
                        <img src="img/xxx.jpg">
                        <img src="img/ccc.jpg">
                    </div>
                </div>
                </form>
            </div>
        <AlertTip :alert-text="alertText" v-show="showAlert" @click="closeTip"/>
<!--        <tanchaung alert-text="alertText" v-show="showAlert"/>-->
    </section>
</template>

<script type="es6">
    import axios from 'axios'
    import AlertTip from "./AlertTip/AlertTip"
    import {reqSendCode,reqLoginByPhone,reqUserInfo} from '../api/index'

    export default {
    data () {
        return {
            loginWay: true,         //true 代表短信登录        false 代表密码登录
            phone: "",              //手机号
            computerTime: 0,        //计时的时间
            code: "",               //短信验证码
            alertText: "",          //提示文本
            showAlert: false,       //是否显示提示框
            token: "",              //token
        }
    },
    computed:{
      rightPhone () {
          return /^1\d{10}$/.test(this.phone)
      }
    },
    methods:{
        fun(){
            this.$router.go(-1)
        },
        fun1(){
          this.$router.push({name:"zhu"})
        },
        // 异步获取短信验证码
        async getCode(){
            // 判断是否开启计时器
            if (!this.computerTime) {
                // 启用倒计时
                this.computerTime = 60
                this.intervalId =  setInterval(() => {
                    this.computerTime--;
                    if (this.computerTime <= 0) {
                        // 停止计时
                        clearInterval(this.intervalId)
                    }
                }, 1000)
                // 发送ajax请求发送验证码
                const result = await reqSendCode(this.phone);
                if (result.code === 20311){
                    //显示提示
                    // this.alertShow(result.msg)
                    // //停止倒计时
                    // if(this.computerTime) {
                    //     this.computerTime = 0
                    //     clearInterval(this.intervalId)
                    //     this.intervalId = 0;
                    // }
                }
            }
        },
        //
        alertShow (alertText) {
            this.showAlert = true
            this.alertText = alertText
        },

        // 异步登录
        async login() {
            let result;
            //前端表单验证
            if (this.loginWay) {    //短信验证
                const {rightPhone, code} = this
                if (!rightPhone) {
                    // 手机号不正确
                    // this.alertShow("手机号不正确")
                } else if (/^d{6}$/.test(code)) {
                    // 验证码不正确
                    // this.alertShow("验证码格式不正确")
                } else {
                    result = await reqLoginByPhone(this.phone, this.code);
                    if (result.code === 20111) {
                        //显示提示
                        // this.alertShow(result.msg)
                    }
                }
            }

            if (result.code===20111){
                const token = result.data
                //将user保存到vuex的state
                this.$store.dispatch('getToken', token)

                this.getMe(token)
                //跳转目录  （去个人中心界面）
                this.$router.replace('/mypage')
            }
        },

        getMe(token) {
            reqUserInfo(token);

            let result = axios({
                method: 'post',
                url: 'http://localhost:8088/user/me',
                data:{

                },
                header: {
                    'Authorization' : token
                }
            })
            const user = result.data;
            this.$store.dispatch('recordUser', user);
        },

        closeTip () {
            this.showAlert = false
            this.alertText = ''
        }
    },
    components: {
        // Tanchaung,
        AlertTip
    }
}
</script>
<style lang='stylus' rel='stylesheet/stylus'>
    .loginContainer
        width 100%
        height 100%
        background #fff
    .loginInner
        padding-top 60px
        width 80%
        margin 0 auto
    .login_submit
        display block
        width 100%
        height 42px
        margin-top 30px
        border-radius 4px
        background #4cd96f
        color #fff
        text-align center
        font-size 16px
        line-height 42px
        border 0
.hedx{
    width: 90%;
    height: .45rem;
    margin: auto;
    /* background: orangered; */
    display: flex;
    justify-content: space-between;
}
.hedx span{
    font-size: .2rem;
    font-weight: 800;
    text-align: center;
    line-height: .45rem;
}
.zxw{
  width: 86%;
  height: .73rem;
  margin: auto;
  /* background: palegreen; */
}
.zxw .hw2{
    width: 100%;
    height: .55rem;
    line-height: .55rem;
    /* background: pink; */
    font-size: .2rem;
}
.zxw .z_h{
  font-size: .13rem;
  color: #999999;
}

.mid{
    width: 86%;
    height: 2rem;
    margin: auto;
    /* background: powderblue; */
}
.mid p{
    width: 100%;
    height: .60rem;
    border-bottom: .02rem solid #c4c4c4;
}
.mid .oi{
    width: 2.4rem;
    height: 97%;
    border: none;
    outline: none;
    background: #ffffff;
}
.mid p .ol{
    /*float: right;*/
    font-size: .16rem;
    /*line-height: .6rem;*/
    background:transparent;
    border: none;
}
.err_phone{
    color: #969896;
}
.right_phone{
    color: black;
}
.mid .l_p{
    font-size: .12rem;
    padding-top: .18rem;
    border-bottom: none;
}

.mid .l_p b{
    display: inline-block;
    margin-left: .08rem;
    width: 3.23rem;
    height: 100%;
    color: #999999;
}
.mid .l_p b span{
    color: #0354f4;
}
.but{
    width: 86%;
    height: .5rem;
    margin: auto;
    background: #83aafa;
    border-radius: .08rem;
}
.but button{
    width: 100%;
    height: 100%;
    color: white;
    border-radius: .08rem;
    border: none;
}

.b_ut{
  width: 86%;
  height: 0.52rem;
  /* background: plum; */
  margin: auto;
  line-height: .44rem;
  text-align: center;
}
.b_ut button{
  border: none;
  background: none;
  color: black;
  /* border: 1px solid red; */
}
.ft{
  width: 86%;
  height: .96rem;
  margin: auto;
  line-height: .44rem;
  text-align: center;
  /* background: palegreen; */
}
.ft span{
  color: black;
}
.ft .im{
  width: 1.6rem;
  height: .3rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.ft .im img{
  width: .29rem;
  height: .27rem;
}
.tui-checkbox:checked {
	background:#1673ff
}
.tui-checkbox {
	width:.18rem;
	height:.18rem;
	background-color:#ffffff;
	border:solid .01rem #dddddd;
	-webkit-border-radius:50%;
	border-radius:50%;
	font-size:0.4rem;
	margin:0;
	padding:0;
	position:relative;
	display:inline-block;
	vertical-align:top;
	cursor:default;
	-webkit-appearance:none;
	-webkit-user-select:none;
	user-select:none;
	-webkit-transition:background-color ease 0.1s;
	transition:background-color ease 0.1s;
}
.tui-checkbox:checked::after {
	content:'';
	top:.04rem;
	left:.03rem;
	position:absolute;
	background:transparent;
	border:#fff solid .02rem;
	border-top:none;
	border-right:none;
	height:.04rem;
	width:.08rem;
	transform:rotate(-45deg);
}
</style>
